<template>
  <div>
    <el-form :inline="true" size="mini" class="custom-form" label-width="68px">
      <el-form-item label="名称">
        <el-input v-model="queryParams.jobName" placeholder="输入任务名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query()">查询</el-button>
      </el-form-item>
    </el-form>
    <!--工具栏-->
    <el-row class="custom-row">
      <el-button size="mini" plain type="primary" @click="openAddEdit()" v-if="hasPerm('timer-job-add')"><i
        class="fa fa-plus-circle"></i>&nbsp;新增
      </el-button>
      <el-pagination
        @current-change="query"
        :current-page.sync="queryParams.pageNumber"
        :page-size="queryParams.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="tableDataTotal"
        style="float:right;">
      </el-pagination>
    </el-row>
    <!--查询结果列表-->
    <el-table
      v-loading="loading"
      :data="tableData"
      @selection-change="multiSelectedChange"
      style="width: 100%;">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="jobName"
        label="任务名称">
      </el-table-column>
      <el-table-column
        prop="jobGroup"
        label="任务分组">
      </el-table-column>
      <el-table-column
        prop="description"
        label="描述">
      </el-table-column>
      <el-table-column
        width="350px"
        prop="jobClassName"
        label="执行类">
      </el-table-column>
      <el-table-column
        prop="cronExpression"
        label="执行时间">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="triggerState"
        label="状态">
        <template slot-scope="scope">
          <el-tag type="danger" size="medium" v-if="scope.row.triggerState==='PAUSED'">暂停</el-tag>
          <el-tag type="primary" size="medium" v-if="scope.row.triggerState==='WAITING'">等待执行</el-tag>
          <primael-tag type="success" size="medium" v-else>正在执行</primael-tag>
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="160">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="修改" v-if="hasPerm('timer-job-edit')">
            <el-button type="text" size="small" @click="openAddEdit(scope.row)"><i class="fas fa-edit"></i></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="恢复" v-if="hasPerm('timer-job-resume')">
            <el-button type="text" size="small" @click="resume(scope.row)"><i class="fas fa-play text-success"></i>
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="停止" v-if="hasPerm('timer-job-pause')">
            <el-button type="text" size="small" @click="pause(scope.row)"><i class="fas fa-pause text-warning"></i>
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" v-if="hasPerm('timer-job-delete')">
            <el-button type="text" size="small" @click="deletePerms(scope.row.id)"><i
              class="fas fa-trash-alt text-danger"></i></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="custom-pagination"
      @current-change="query"
      :current-page.sync="queryParams.pageNumber"
      :page-size="queryParams.pageSize"
      layout="total, prev, pager, next, jumper"
      :total="tableDataTotal"
      style="text-align:right;">
    </el-pagination>

    <!--新增/修改食材-->
    <add-edit-timer :show.sync="showTimerForm" :v-if="showTimerForm" :timerData="editData"></add-edit-timer>
  </div>
</template>

<script>
  import AddEditTimer from './AddEditTimerDialog'
  import {dateFormat} from '@/utils/dateFormat'

  export default {
    name: "index",
    components: {
      AddEditTimer
    },
    data() {
      return {
        loading: false,
        showTimerForm: false,
        editData: null,
        queryParams: {
          name: '',
          type: '',
          pageNumber: 1,
          pageSize: 10
        },
        tableData: [],
        tableDataTotal: 0,
        selectedRows: [],
      }
    },
    mounted: function () {
      this.query();
    },
    methods: {
      openAddEdit: function (data) {
        if (data)
          this.editData = data;
        else
          this.editData = null;
        this.showTimerForm = true;
      },
      query: function (currPage) {
        if (!currPage)
          this.queryParams.pageNumber = 1;
        this.loading = true;
        this.api.post('/app-sync-data/timer/job/list', this.queryParams)
          .then((data) => {
            this.tableData = data.data.records;
            this.tableDataTotal = data.data.total;
            this.loading = false;
          });
      },
      multiSelectedChange: function (val) {
        this.selectedRows = val;
      },
      deletePerms: function (id) {
        this.$confirm('该操作是物理删除，不可复原，是否确认删除？')
          .then(() => {
            let _ids = [];
            if (!id && this.selectedRows.length > 0) {
              this.selectedRows.forEach(function (_s, index, arr) {
                _ids.push(_s.id);
              });
            } else
              _ids.push(id);
            this.api.post('/app-sync-data/timer/job/delete', {id: _ids.join(',')})
              .then((data) => {
                if (data.code === 200) {
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  });
                  this.query();
                } else {
                  this.$message.error(data.data);
                }
              });
            done();
          });
      },
      resume: function (row) {
        this.$confirm('是否要恢复定时任务？')
          .then(() => {
            this.api.post('/app-sync-data/timer/job/resume', row)
              .then((data) => {
                if (data.code === 200) {
                this.$message({
                  message: '恢复成功',
                  type: 'success'
                });
                this.query();
              }
          else
            {
              this.$message.error(data.data);
            }
          });
        done();
      }
  )
  ;
  },
  pause: function (row) {
    this.$confirm('是否要暂停定时任务？')
      .then(() => {
        this.api.post('/app-sync-data/timer/job/pause', row)
          .then((data) => {
            if (data.code === 200) {
            this.$message({
              message: '暂停成功',
              type: 'success'
            });
            this.query();
          }
      else
        {
          this.$message.error(data.data);
        }
      });
    done();
  }
  )
  ;
  }
  }
  }
</script>
